<%--
  Created by IntelliJ IDEA.
  User: 陪你度过漫长岁月
  Date: 2022/11/2
  Time: 17:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/layui.css"   media="all">
</head>
<body>

<div class="demoTable">
    <form class="layui-form" action="">
        真实姓名：
        <div class="layui-inline">
            <input class="layui-input" name="realName" id="realName" autocomplete="off">
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">角色：</label>
            <div class="layui-input-block">
                <select name="roleId" lay-filter="aihao">
                    <option value=""></option>
                    <option value="1">管理系统员</option>
                    <option value="2">店长</option>
                    <option value="3">店员</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="test" lay-filter="test"></table>

</div>

<div class="layui-form-item">
    <div class="layui-input-block">
        <button type="submit" class="layui-btn">退出</button>
    </div>
</div>

<div>
    <p id="qw">

    </p>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show" >查看</a>
</script>
<script src="${pageContext.request.contextPath}/statics/layui/layui.js" charset="utf-8"  type="text/javascript"></script>
<script type="text/javascript">
    layui.use(['table','form','jquery'], function(){
        var table = layui.table;
        var form = layui.form;
        var $ =layui.jquery;
        var tableIns= table.render({
            elem: '#test'
            ,url: 'list'
            ,toolbar: '#toolbarDemo'
            ,cols: [
                [
                {field:'id', width:80, title: '编号'}
                ,{field:'account', width:80, title: '账号'}
                ,{field:'realName', width:120, title: '真实姓名'}
                ,{field:'roleId', width:80, title: '角色'}
                ,{field:'sex', width: 70 ,title: '性别', minWidth: 80}
                ,{field:'age', width:80, title: '年龄'}
                ,{field:'phone', width:140, title: '电话'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:250}
                 ]
            ]
            ,page: true
        });

        table.on('toolbar(test)', function(obj){
            switch(obj.event){
                case 'add':
                    open('add1')
                    break;
            };
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
           // console.log(obj)
            if(obj.event === 'view'){
                window.open('${pageContext.request.contextPath}/user/view'+data.id)
            } else if(obj.event === 'delete'){
                layer.confirm('真的删除行么', function(index){
                    $.get('${pageContext.request.contextPath}/user/delete'+data.id,function (data){
                        layer.close(index);
                        if (data=="true"){
                            window.alert("删除成功!")
                            location.reload();
                        }else{
                            window.alert("删除失败!")
                        }
                    })
                });
            } else if(obj.event === 'update'){
                // console.log(data);
                window.open("${pageContext.request.contextPath}/user/update"+data.id)
            }else if (obj.event=='show'){
                $.get('${pageContext.request.contextPath}/user/show',{"id":data.id},function (data){
                   <%--let qwer = '<img src=${pageContext.request.contextPath}/statics/upload/>'--%>
                    let img="<img src='"+"${pageContext.request.contextPath}/statics/upload/"+data.idpicpath+"'/>"
                    $("#qw").empty();
                    $("#qw").append("账号"+data.account+"<br>"
                        +"真实姓名"+data.id+"<br>"
                        +"性别"+data.password+"<br>"
                        +"性别"+data.sex+"<br>"
                        +"出生日期"+data.birthday+"<br>"
                        +"手机号码"+data.phone+"<br>"
                        +"用户地址"+data.address+"<br>"
                        +"图片"+img
                    );

                 },"json")
            }
        });

        //监听提交
        form.on('submit(demo1)',function (data){
            console.log(data.field)
            //这里以搜索为例
            tableIns.reload({
                where:{//设定异步数据接口的额外参数，任意设
                    realName:data.field.realName
                    ,roleId:data.field.roleId
                }
                ,page:{
                curr:1//重新从第一页开始
                }
            })
            return false;
        })
    });
</script>

</body>
</html>